<template>
	<a-modal :visible="visible" :title="options.title" :maskClosable="false" :confirmLoading="confirmLoading"
		:width="550" @cancel="cancelHandel" centered>
		<a-row v-if="imageLoading">
			<a-col :xs="24" :md="24" :style="{ height: croperHeight }" style="display: flex; align-items: center; justify-content: center;">
				<a-spin />
			</a-col>
		</a-row>
		<a-row v-else>
			<a-col :xs="24" :md="24" :style="{ height: croperHeight }">
				<vue-cropper v-if="options.img" ref="cropper" :img="options.img" :outputSize="options.outputSize"
					:outputType="options.outputType" :info="options.info" :canScale="options.canScale"
					:autoCrop="options.autoCrop" :autoCropWidth="options.autoCropWidth"
					:autoCropHeight="options.autoCropHeight" :fixed="options.fixed" :fixedNumber="options.fixedNumber"
					:full="options.full" :fixedBox="options.fixedBox" :canMove="options.canMove"
					:canMoveBox="options.canMoveBox" :original="options.original" :centerBox="options.centerBox"
					:height="options.height" :infoTrue="options.infoTrue" :maxImgSize="options.maxImgSize"
					:enlarge="options.enlarge" :mode="options.mode" @realTime="realTime">
				</vue-cropper>
			</a-col>
		</a-row>
		<template #footer>
			<a-button key="back" @click="cancelHandel">取消</a-button>
			<a-button key="submit" type="primary" :loading="uploadLoading" @click="uploadImg">保存</a-button>
		</template>
	</a-modal>
</template>
<script>
	import {
		defineComponent,
		ref,
		toRefs,
		reactive,
		watch,
		computed
	} from 'vue';
	import {
		VueCropper
	} from "vue-cropper";
	import "vue-cropper/dist/index.css";
	import request from "../../../../../../common/utils/request";
	import imageToBase64 from 'image-to-base64/browser';
	import store from '@/store';
	export default defineComponent({
		props: {
			//图片存储在oss上的上级目录名
			visible: {
				type: Boolean,
				default: false,
			},
			imageUrl: {
				type: String,
				default: ''
			}
		},
		components: {
			VueCropper
		},
		setup(props, context) {
			const cropper = ref()
			const state = reactive({
				img: null,
				confirmLoading: false,
				uploadLoading: false,
				options: {
					img: "", //裁剪图片的地址
					outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1)
					outputType: "JPG", //裁剪生成图片的格式（jpeg || png || webp）
					info: true, //图片大小信息
					canScale: false, //图片是否允许滚轮缩放
					autoCrop: true, //是否默认生成截图框
					autoCropWidth: 550, //默认生成截图框宽度
					autoCropHeight: 450, //默认生成截图框高度
					fixed: true, //是否开启截图框宽高固定比例
					fixedNumber: [9, 16], //截图框的宽高比例
					full: false, //false按原比例裁切图片，不失真
					fixedBox: false, //固定截图框大小，不允许改变
					canMove: false, //上传图片是否可以移动
					canMoveBox: true, //截图框能否拖动
					original: false, //上传图片按照原始比例渲染
					centerBox: false, //截图框是否被限制在图片里面
					height: false, //是否按照设备的dpr 输出等比例图片
					infoTrue: true, //true为展示真实输出图片宽高，false展示看到的截图框宽高
					maxImgSize: 3000, //限制图片最大宽度和高度
					enlarge: 2, //图片根据截图框输出比例倍数
					mode: "contain", //图片默认渲染方式
					title: ''
				},
				previews: {},
				url: {
					upload: "/sys/common/saveToImgByStr",
				},
				croperHeight: '450px',
				imageLoading: false
			})

			const cancelHandel = () => {
				state.confirmLoading = false;
				context.emit("close");
			}

			const okHandel = () => {
				state.confirmLoading = true;
			}

			//移动框的事件
			const realTime = (data) => {
				state.previews = data;
			}
			//上传图片
			const uploadImg = () => {
				cropper.value.getCropBlob((file) => {
					state.uploadLoading = true;
					cropper.value.getCropData((base64) => {
						request
							.post("/public", "/system/uploadImageFromBase64", {
								image: base64,
								dir: "shotstack",
							})
							.then((res) => {
								context.emit('getCropper', res.fileUrl)
								state.uploadLoading = false;
							}).catch(err=>{
								state.uploadLoading = false;
							});
					});
				});
			}

			watch(() => props.visible, val => {
				if (val && props.imageUrl) {
					state.imageLoading = true
					if(radioType.value == '1:1'){
						state.options.fixedNumber = [1, 1]
					} else if(radioType.value == '16:9'){
						state.options.fixedNumber = [16, 9]
					} else {
						state.options.fixedNumber = [9, 16]
					}
					let image = new Image()
					image.src = props.imageUrl
					image.onload = function () {
					    state.croperHeight = image.height/image.width*502 + 'px'
						state.options.autoCropHeight = image.height/image.width*502
						imageToBase64(props.imageUrl).then(response => {
							state.options.img = `data:png;base64,${response}`
							state.imageLoading = false
						}).catch(error => {
							console.log(error); // Logs an error if there was one
							state.imageLoading = false
						})
					};
				}
				
				if(!val){
					state.options.img = ''
					state.croperHeight = '450px'
					state.options.autoCropHeight = 450
				}
			})
			
			const radioType = computed(()=>store.getters.clipJSON?.aspect_ratio)

			return {
				...toRefs(state),
				cropper,
				cancelHandel,
				okHandel,
				realTime,
				uploadImg,
				radioType
			}
		}
	})
</script>

<style lang="less" scoped>
	.avatar-upload-preview_range,
	.avatar-upload-preview {
		position: absolute;
		top: 50%;
		transform: translate(50%, -50%);
		width: 180px;
		height: 180px;
		border-radius: 50%;
		box-shadow: 0 0 4px #ccc;
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.avatar-upload-preview_range {
		border-radius: 0;
	}

	:deep(.cropper-modal[data-v-26736c2c]) {
		background: none;
	}

	:deep(.vue-cropper[data-v-26736c2c]) {
		background-image: none;
	}
</style>